import Taro, { Component } from '@tarojs/taro'
import { View, Text } from '@tarojs/components'
import { connect } from '@tarojs/redux'

import './style.less'
import SubTitle from '../SubTitle'
import { getHistoryInfo } from '../../store/actions/practice'

@connect((state) => ({
  history: state.system.practice.history,
}))
class HistoryList extends Component {

  navTo = (e) => {
    const { dispatch } = this.props
    if (
      e.currentTarget &&
      e.currentTarget.dataset &&
      e.currentTarget.dataset.id
    ) {
      dispatch(getHistoryInfo(e.currentTarget.dataset.id))
    }
    Taro.navigateTo({
      url: '../../pages/historyInfo/index'
    })
  }

  render() {
    const { history } = this.props
    let arr = []
    if (history.result && history.result.results) {
      arr = history.result.results
    }
    console.log(arr)
    return (
      <View className='historyList' >
        <SubTitle type='special-text' title='记录' />
        {
          arr.map(item => (
            <View className='item' key={item.id} onClick={this.navTo} data-id={item.id} >
              <Text className='text' >
                <Text>{item.date}</Text>
                <Text className='label' >用时</Text>
                <Text>{item.duration}秒</Text>
              </Text>
              <Text className='icon' >></Text>
            </View>
          ))
        }
      </View>
    )
  }
}

export default HistoryList
